// Gradients made with the GradientArt editor - https://gra.dient.art

$zinc-950: #09090b;

html, body {
  width: 100%;
  height: 100%;
  background-color: $zinc-950;
  display: flex;
  align-items: center;
  justify-content: center;
}

#root {
  width: 100vmin;
  height: 100vmin;
  position: relative;
  overflow: hidden;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer-1 {
  animation: 30s linear rotate infinite;
  transform-origin: 66% 40%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.46) 3.96%, rgba(69,168,255,0) 8.33%, rgba(69,168,255,0) 8.33%) 69.5% 37.7% / 17.2% 17.2% no-repeat, /* Rays */
    radial-gradient(ellipse at 50% 50%, rgba(255,248,176,1) 0%, rgba(69,168,255,0) 47.22%) 74.1% 35.6% / 33.6% 36.6% no-repeat; /* Rays */
}

.layer-2 {
  animation: 20s linear rotate infinite reverse;
  transform-origin: 66% 40%;
  background:
          radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 20%, $zinc-950 29%) 77.4% 33.8% / 40% 40% no-repeat, /* Mask */
          repeating-conic-gradient(from 15deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.51) 2.64%, rgba(69,168,255,0) 5.56%, rgba(69,168,255,0) 5.56%) 69.5% 37.7% / 17.2% 17.2% no-repeat; /* Rays */
}

.layer-3 {
  animation: 20s linear rotate infinite;
  background:
    repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 8.1%, rgba(69,168,255,0) 16.67%, rgba(69,168,255,0) 16.67%) 0 0 / 100% 100% no-repeat; /* Rays */
}

.layer-4 {
  animation: 40s linear rotate infinite reverse;
  background:
    repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 2.86%, rgba(69,168,255,0) 5.88%, rgba(69,168,255,0) 5.88%) 0% 0% / 100% 100% no-repeat; /* Rays */
}

.layer-5 {
  animation: 40s linear rotate infinite;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 6.62%, rgba(69,168,255,0) 7.69%, rgba(69,168,255,0) 7.69%) 0% 0% / 100% 100% no-repeat; /* Rays */
}

.layer-6 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.27) 0%, rgba(69,168,255,0) 63.54%) 67% 39.3% / 5.8% 5.8% no-repeat, /* Glow */
    radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 40.28%, rgba(255,183,163,0.05) 52.43%, rgba(69,168,255,0) 63.54%) 68% 38.6% / 13% 13% no-repeat, /* Glow */
    radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.55) 0%, rgba(69,168,255,0) 63.54%) 66.9% 39.3% / 3.4% 3.4% no-repeat, /* Glow */
    radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.2) 0%, rgba(69,168,255,0) 66.67%) 70.7% 36.5% / 25.6% 25.6% no-repeat, /* Glow */
    radial-gradient(ellipse at 50% 50%, $zinc-950 26%, rgba(69,168,255,0) 26.4%) 0% 0% / 100% 100% no-repeat, /* Moon */
    radial-gradient(ellipse at 50% 50%, rgba(255,212,148,0.04) 0%, rgba(69,168,255,0) 69.79%) 0% 0% / 100% 100% no-repeat, /* Glow */
    radial-gradient(ellipse at 50% 50%, rgba(255,240,148,0.11) 0%, rgba(69,168,255,0) 52.43%) 0% 0% / 100% 100% no-repeat, /* Glow */
    radial-gradient(ellipse at 51% 49%, rgba(69,168,255,0) 23.96%, $zinc-950 40.63%) 0% 0% / 100% 100% no-repeat, /* Mask */
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,239,69,0.14) 11.04%, rgba(69,168,255,0) 20%, rgba(69,168,255,0) 20%) 0% 0% / 100% 100% no-repeat, /* Rays */
    radial-gradient(ellipse at 52% 48%, rgba(69,168,255,0) 23.96%, $zinc-950 34.03%) 0% 0% / 100% 100% no-repeat, /* Mask */
    radial-gradient(ellipse at 50% 50%, rgba(255,185,147,0.29) 28%, rgba(69,168,255,0) 30%) 0% 0% / 100% 100% no-repeat; /* Glow */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}